<template>
  <div>
    <div class="section">
      <FormItem :label="like.content" v-for="(like,index) in pageData.like_basic_data" :key="index">
        <template v-if="like.sub && like.sub.length">
          <div class="chexkbox-group">
            <template v-for="(sub,sidx) in like.sub" >
              <Checkbox
                v-if="sub.input_type == 1"
                :key="sidx"
                :label="sub.content"
                v-model="like_data.like_id"
                :value="sub.id"/>
            </template>
          </div>

          <template v-for="(sub,sidx) in like.sub">
            <Input v-if="sub.input_type == 2" v-model="like_data.extra[sub.id]" :placeholder="sub.content" :key="sidx"/>
          </template>
        </template>
        <template v-if="like.input_type == 2">
          <Input  v-model="like_data.extra[like.id]" :placeholder="like.content"/>
        </template>
      </FormItem>
    </div>

    <div class="page-footer">
      <button class="btn btn-primary btn-block" @click="submit">提交</button>
    </div>

    <Modal v-if="showPopup" class="popup-tip-modal">
      <div class="popup-tip-box">
        <div class="title">恭喜你资料提交成功</div>
        <div class="content">感谢您的信任与配合</div>
        <div class="btn-group">
          <button @click="goHome" class="btn btn-primary btn-block">返回主页</button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import Input from '~/components/Input';
import Checkbox from '~/components/Checkbox'
import FormItem from '~/components/CompleteItem'
import Modal from '~/components/Modal';

export default {
  components:{
    Input,
    FormItem,
    Checkbox,
    Modal
  },
  data(){
    return {
      like_data:[],
      showPopup:false,
      step:5,

      pageData:{}
    }
  },
  async mounted(){
    this.$emit('setTitle','喜好')
    this.$store.commit('completeInfo/setStep',this.$route.name);

    await this.getCompleteInfo();

  },
  methods:{
    async getCompleteInfo(){
      this.$emit('loading',true);
      try{
        let {data:rs} = await this.$axios.post('?ct=api&ac=get_complete_info',{
          step:this.step,
        })
        if(rs.code == 0){
          this.pageData = rs.data;
          let {page_data} = rs.data;

          //初始化数据
          //用于存储
          /**
           *
           * {
           *  like_id:[],
           *  extra:{
           *     extra_id:extra
           *  }
           * }
           *
           */
          let like_data = {
              like_id:[],//用于存储checkbox
              extra:{}//用于存储textarea
          }
          // //格式化like_list
          this.pageData.like_basic_data.forEach((item)=>{
            let extra_id = item.id;
            if(item.input_type == 0){
                item.sub.forEach((sub)=>{
                    if(sub.input_type != 1){
                        extra_id = sub.id;
                    }
                })
            }
            like_data.extra[extra_id] = ''
          });

          //初始化数据
          page_data.like_data.forEach((item)=>{
              if(item.like_id && !item.extra){
                  like_data.like_id.push(item.like_id);
              }else if(item.extra){
                  like_data.extra[item.like_id] = item.extra
              }
          })
          this.like_data = like_data;
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.$emit('loading',false);
    },
    submit(){
      //格式化表单提交的数据
      let rs = [];
      this.like_data.like_id.forEach((like_id)=>{
        rs.push({
          like_id:like_id,
          extra:'',
        })
      })
      Object.keys(this.like_data.extra).forEach((id)=>{
        rs.push({
          like_id:id,
          extra:this.like_data.extra[id]
        })
      })

      this.$emit('submit',{
        step:this.step,
        like_data:rs,
      },()=>{
        this.showPopup = true;
      })
    },
    goHome(){
      if(this.$tools.isLema){
        if(this.$tools.isIOS){
          console.log('ios closejclick false')
          window.webkit.messageHandlers.closejclick.postMessage(false);
        }else if(this.$tools.isAndroid){
          console.log('android completeInfoDone 1')
          window.JSInterface2Java.completeInfoDone(1);
        }
      }else{
        this.$router.push({name:'index'});
      }
    }
  }
}
</script>
<style lang="less" scoped>
.page-top-tip {
  margin-bottom:40px;
  font-size:24px;
  color:#c0c3cc;
  code {
    color:#f05521;
    font-style: normal;
  }
}
.chexkbox-group {
  margin-left:-30px;
}
/deep/ .com-checkbox {
  margin-left:30px;
  margin-right:0!important;
  margin-bottom:20px;
}
.section + .section {
  border-top: 14px solid #edeef0;
}
</style>

